<script setup lang="ts">
import gsap from 'gsap';
import Lexar from '~/assets/imgs/invitation-spin/lexar.png';
import { useList } from './hooks';

withDefaults(defineProps<{
  bit?: boolean;
}>(), {
  bit: false,
});
const { status, amount, refetch, symbol, currency, withdrawAmount } = useList();
const fake = ref(0);

async function payouts() {
  if ([0, 1, 4, 6].includes((status.value?.withdraw_status ?? 0))) {
    globalPopups.invitationSpinPayouts.open?.();
    return;
  }
  if ((status.value?.withdraw_status ?? 0) === 2) {
    await apis.apiActivityInviteWithdraw(undefined);
    antdMessage.info($t('9jI2m3ZiANn0KfHwcesRv'));
    globalPopups.invitationSpinPayouts.open?.();
    refetch();
  }
  if ((status.value?.withdraw_status ?? 0) === 3) {
    antdMessage.info($t('9jI2m3ZiANn0KfHwcesRv'));
    globalPopups.invitationSpinPayouts.open?.();
  }
}
function animateToValue() {
  gsap.to(fake, {
    value: amount.value,
    duration: 2.2,
    onUpdate: () => {
      fake.value = fake.value.toFixed(0);
    },
    onComplete: () => {
      fake.value = amount.value;
    },
  });
}

watch(amount, () => {
  animateToValue();
}, { immediate: true });
</script>

<template>
  <div>
    <div class="mb-4.5 flex-center items-center" :class="{ '!mb-2': bit }">
      <div class="flex items-center justify-center gap-2" :class="{ 'flex-1': bit }">
        <img :src="Lexar" alt="" class="w-8.2 object-cover">
        <span class="text-8.5 text-sys-text-body lt-tabletl:text-5">
          {{ symbol[currency] }}
        </span>
        <TAmount :value="fake" symbol="" iconPos="left" :decimals="0" format="min-dec" class="flex-center text-7.5 text-brand font-900" />
      </div>
      <AButton v-if="bit" type="primary" class="ant-cover__Button-3d-primary" @click="payouts">
        {{ $t('o8KenDf00UqzLnE89hJyA') }}
      </AButton>
    </div>

    <div>
      <AProgress
        class="ant-cover__progress-invited"
        :size="10" strokeColor="#DE1212"
        :percent="(status?.amount ?? 0) / Number(withdrawAmount) * 100"
        trailColor="#969AAB"
        :showInfo="false"
      />
    </div>
  </div>
</template>

<style lang="scss">
.ant-progress.ant-cover__progress-invited {
  .ant-progress-bg {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      right: 0;
      z-index: 1;
    }
  }
}
</style>
